<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Example two lists clone</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
     
     <div id="main">
        <h1>Vue Dragable</h1>

        <div class="drag">
            <h2>List 1 dragable</h2>
            <draggable id="list1" class="dragArea" :options="{group:'people'}" :list="list1">
                <div v-for="(element, index)  in list1" :key="index" v-if="element.id > 2">
                    {{element.name}} {{$index}}
                </div>
             </draggable>

            <h2>List 2 dragable</h2>
            <draggable id="list2" class="dragArea" :options="{group:'people'}" :list="list2">
                <div v-for="(element, index) in list2" :key="index" v-if="element.id > 3">{{element.name}}</div>
             </draggable>
         </div>

        <div class="normal">
            <h2>List 1 v-for</h2>
            <div>
                <div v-for="(element, index)  in list1" :key="index">{{element.name}}</div>
             </div>

            <h2>List 2 v-for</h2>
            <div>
                <div v-for="(element, index)  in list2" :key="index">{{element.name}}</div>
            </div>
        </div>

        <a href="index.html">See basic example</a>
        <a href="Two_Lists.html">See 2 lists example</a>
        <a href="Two_Lists_Clone_If.html">See clone v-if element example</a>


    </div>        

        <script type="text/javascript" src="libs\vue\dist\vue.js"></script>
        <script type="text/javascript" src="libs\Sortable\Sortable.js"></script>
        <script type="text/javascript" src="src\vuedraggable.js"></script>
        <script type="text/javascript" src="script\complex.js"></script>

    </body>
</html>